整理记录一下博客搭建过程。

原博客地址墨言 屠城 ，在网上看博客风格的时候发现了这两个，简洁又帅气，一下子就看上了，于是着手也弄一个。

Hexo目录结构

1
2
3
4
5
6
7
8
|-- _config.yml
|-- package.json
|-- scaffolds
|-- source
   |-- _posts
|-- themes
|-- .gitignore
|-- package.json

多谢墨言提供的demo，直接使用如下：

本地安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ git clone xxx hexo_blog
# 设置淘宝npm源
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用cnpm安装
$ cnpm install
# 执行
$ cnpm install -g hexo-cli
# 安装插件
$ cnpm install hexo-renderer-pug --save
$ cnpm install hexo-renderer-sass --save
# 重新生成静态博客的所有内容
$ hexo generate
# 重启 hexo 本地服务：
$ hexo serve
# 访问

hexo generate可能会失败，提示不支持当前环境的情况。网上查没什么准确的答案，有说是sass插件不支持高版本的node。我是退到6版本的，没有再报错，也可能有其它的处理方式。

安装成功后，本地访问：

1
http://localhost:4000/

(2019.3.1更新)

每次都部署太麻烦了，弄了个脚本自动顺序执行上面的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#! /bin/bash
# 使用git输入命令 sh intstall.sh
# 1、设置淘宝镜像
echo "---Start to install taobao yuan---"
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org	
# 2、cnpm安装
echo "---Start to install cnpm---"
cnpm install
# 3、hexo安装
echo "---Start to install hexo---"
cnpm install -g hexo-cli
# 4、安装插件renderer-pug 
echo "---Start to install renderer-pug---"
cnpm install hexo-renderer-pug --save
# 5、安装插件renderer-sass
echo "---Start to install renderer-sass---"
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ &&  cnpm install hexo-renderer-sass --save
# 6、安装google收录
echo "---Start to install google sitemap---"
cnpm install hexo-generator-sitemap --save
# 7、安装baidu收录
echo "---Start to install baidu-sitemap---"
cnpm install hexo-generator-baidu-sitemap --save
# 8、重新生成静态内容
echo "---Start to generate---"
hexo g
# 9、启动本地服务
echo "---Start to server---"
hexo s
# 10、浏览器访问：
echo "---Start to http://localhost:4000/"

(2020.7.27更新)

sass插件安装失败问题，不在考虑版本

增加环境变量

1
2
SASS_BINARY_PATH
C:\Users\ooo\AppData\Roaming\npm-cache\node-sass\v3.13.1\win32-x64-72_binding.node

部署到GitHbu Pages

配置SSH Key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
检查本地是否已经存在SSH Key，没有的话会提示No such file or directory，如果有就直接删了吧。
$ cd ~/.ssh

创建SSH Key
$ ssh-keygen -t rsa -C "your_email@example.com"

这样默认会在本地的～/.ssh目录下生成id_rsa，id_rsa.pub两个文件。然后把id_rsa.pub的内容粘贴到GitHub的SSH and GPG keys

测试链接是否成功
$ ssh -T git@github.com
$ ssh -T git@git.coding.net

此时还需要配置：
$ git config --global user.name // 你的github用户名
$ git config --global user.email //邮箱

创建github.io

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
创建仓库命名为xxx.github.io

然后配置一下hexo根目录的_config.yml
deploy:
  type: git
  repository: git@github.com:xxx/xxx.github.io.git
  branch: master
#backup
backup:
    type: git
    theme: maupassant
    repository:
       github: git@github.com:xxx/hexo_blog.git,master
       # 增加coding 备份已迁移到coding
	  github: git@git.coding.net:xxx/hexo_blog.git,master

推送到GitHub Pages

1
2
3
4
5
6
# 清理一下
$ hexo clean 
# 重新生成静态内容
$ hexo g
# 推送内容
$ hexo d

访问GitHub Pages

1
http://xxx.github.io

配置域名

增加域名解析

1
2
CNAME	@	默认	xxx.github.io
CNAME	www	默认	xxx.github.io

在Hexo 的source文件夹下创建CNAME文件，内容为域名

设置完成后，通过域名访问

增加动态线条

有天突然想起来很多网页上见到的动态线条效果挺酷的，也不知道名字，就百度找了找，原来只通过一个js就可以实现。但网上对于Hexo的只有next主题有方案，查了查maupassant主题是也支持动态背景的，最后在maupassant\layout\base.jade增加了一行

1
2
if theme.canvas_nest == true
  script(type='text/javascript', src='//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js', async)

然后在maupassant的_config.yml开启动态背景

1
2
canvas_nest:
  enable: true

跟随鼠标的动态线条就出来了，挺帅的，而且手机版面同样支持。

多台电脑更新操作

1
2
3
4
5
backup:
    type: git
    theme: maupassant
    repository:
       github: git@github.com:xxx/hexo_blog.git,master
1
2
推送
$ hexo b

评论功能

大都说Valine比较极简，试着加了下。

Valine无后端，所以要基于Leancloud。首先注册Leancloud，创建应用，拿到APP ID和 APP KEY。还要在安全中心增加要访问的域名地址，http://localhost:4000 也可以加上，不然本地预览会提示code 403。

然后在主题的_config.yml文件里进行Valine配置，没有的话可以直接添加。

1
2
3
4
5
6
7
8
9
10
valine: ## https://valine.js.org
  enable: true
  appid: your id
  appkey: your id
  notify: false 
  verify: false 
  placeholder: Just so so ## Comment box placeholders.
  avatar: 'mm' ## Gravatar type, see https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
  pageSize: 10 ## Number of comments per page.
  guest_info: nick,mail,link ## Attributes of reviewers.

网上都是next主题的教程，没有maupassant的，还好原作者已经实现了评论功能，但不是Valine。在maupassant主题的\layout\post; \layout\_partial\comments文件里找到了关于Valine的。不过post里面 的我增加了后有报错，给去掉了也能正常使用，所以最后是在\layout\_partial\comments增加一段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if theme.valine.enable == true
    #vcomment
    script(src='//cdn1.lncld.net/static/js/3.0.4/av-min.js')
    script(src='//unpkg.com/valine@latest/dist/Valine.min.js')
    script.
      var notify = '#{ theme.valine.notify }' == true ? true : false;
      var verify = '#{ theme.valine.verify }' == true ? true : false;
      var GUEST_INFO = ['nick','mail','link'];
      var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
        return GUEST_INFO.indexOf(item) > -1
      });
      guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
      window.valine = new Valine({
        el:'#vcomment',
        notify:notify,
        verify:verify,
        appId:'#{theme.valine.appid}',
        appKey:'#{theme.valine.appkey}',
        placeholder:'#{theme.valine.placeholder}',
        avatar:'#{theme.valine.avatar}',
        guest_info:guest_info,
        pageSize:'#{theme.valine.pageSize}'
      })

顺便发现浏览统计不蒜子功能不起作用了，这里有解释，需要修改下地址，本主题是在maupassant\layout\post文件

1
2
3
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
修改为：
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

增加谷歌百度收录

1
2
3
4
5
6
7
8
9
10
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

_config.yml增加
Plugins:
- hexo-generator-sitemap
sitemap:
    path: sitemao.xml
baidusitemap:
    path: baidusitemap.xml

(2021.4.19更新)

Github Pages百度一直收录不到，最近有时间，找了找发现可以用Vercel部署，速度也挺快的，所以同时在Vercel上部署了一套，把域名换到Vercel上了。

（end）

求知，共勉 ！

62dc0136dc37f